<template>
	<div class="hello">
		<h1>{{ msg }}</h1>
		<button v-if="isShow" @click="toEdit">添加</button>
		<input v-else ref="inp666" type="text" />
	</div>
</template>

<script>
export default {
	name: "HelloWorld",
	data() {
		return {
			isShow: true,
		};
	},
	props: {
		msg: String,
	},
	a: 2,
	methods: {
		toEdit() {
			this.isShow = false;
			// // 需求，找到input并且切換獲取焦點
			this.$nextTick(() => {
				this.$refs.inp666.focus();
			});

			setTimeout(() => {
				console.log(1, "setTimeout");
			}, 0);
			Promise.resolve().then(() => {
				console.log(2, "then1");
			});
			this.$nextTick(() => {
				console.log(3, "nextTick1");
			});
			Promise.resolve().then(() => {
				console.log(4, "then2");
			});
			this.$nextTick(() => {
				console.log(5, "nextTick2");
			});
			console.log(6, "主线程代码");
			/*
  nextTick源码重点:
    1.多次执行nextTick,只会开启一个.then微任务
    2.nextTick通过callbacks数组,来收集所有的nextTick传入的回调函数,最终在微任务中一次性遍历执行

  响应式更新流程:
    1.开发者修改响应式属性的值 
    2.触发该响应式属性的数据代理和数据劫持
    3.在数据劫持中会触发dep.notify(用于通知视图更新)
    4.dep.notify会触发wacther的update方法(用于实现视图更新)
    5.update方法中会调用queueWatcher方法
    6.queueWatcher方法中会调用nextTick方法,并将更新视图的函数做为实参传递给nextTick
*/
		},
	},
	mounted() {
		// console.log("HelloWorld", this.$options.a);
	},
};
</script>

<style scoped></style>
